<template>
    <el-dialog
            v-model="dialogVisible"
            :title="dialogTitle"
            width="50%"
            @close="handleClose"
    >
        <el-form
                ref="formRef"
                :model="formM"
                :rules="formRules"
                label-width="120px"
                status-icon
        >
            <el-form-item label="上级部门" prop="parentId">
                <el-cascader :options="deptOptions" :props="props1" clearable   v-model="formM.parentId" style="width: 100%;"/>

                <span>不选，则直接创建顶级部门</span>
            </el-form-item>
            <el-form-item label="部门名称" prop="deptName">
                <el-input v-model="formM.deptName" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="负责人" prop="userName">
                <el-select v-model="formM.userName" filterable placeholder="请选择" style="width: 100%;" @change="handleUserChange">
                    <el-option :label="item.userName" :value="`${item.userId}/${item.userName}/${item.userEmail}`" v-for="(item, index) in userOptions" :key="'userOptions'+index"/>
                </el-select>
            </el-form-item>
            <el-form-item label="负责人邮箱" prop="menuName">
                <el-input v-model="formM.userEmail" placeholder="请输入" disabled/>
            </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确认</el-button>
          </span>
        </template>
    </el-dialog>
</template>

<script setup>

    defineOptions({
        name: 'DeptDialogView',
        inheritAttrs: false,
    })
    const { proxy } = getCurrentInstance()
    let dialogVisible = ref(false)
    let dialogTitle = ref('新增')
    let currentAction = ref('add')

    const props1 = {
        checkStrictly: true,
        label: 'deptName',
        value: '_id'
    }
    const formM = ref({})
    const formRules = ref({
        deptName: [
            { required: true, message: '请输入菜单名称', trigger: 'blur' },
        ]
    })
    const formRef = ref()

    const emit = defineEmits(['submit'])

    onMounted(() => {
        getDept()
        getUser()
    })

    const handleClose = () => {
        if (formRef.value) {
            formRef.value.resetFields()
        }
        close()
    }
    const addAction = () => {
        currentAction.value = 'add'
        dialogTitle.value = '新增'
        open()
    }
    const editAction = (item) => {
        currentAction.value = 'edit'
        dialogTitle.value = '编辑'
        open()
        nextTick(() => {
            Object.assign(formM.value, item, {
                user: `${item.userId}/${item.userName}/${item.userEmail}`
            })
        })
    }

    const open = () => {
        dialogVisible.value = true
    }

    const close = () => {
        dialogVisible.value = false
    }

    const deptOptions = ref([])
    const getDept = async () => {
        deptOptions.value = await proxy.$api.getAllDept()
        // console.log(deptOptions.value)
    }

    const userOptions = ref([])
    const getUser = async () => {
        userOptions.value = await proxy.$api.getAllUser()
    }

    const handleSubmit = () => {
        proxy.$refs.formRef.validate(async (valid) => {
            if (valid) {
                const params = toRaw(formM.value)
                delete params.user
                params.action = currentAction.value
                await proxy.$api.operateDept(params)
                proxy.$message.success(`${dialogTitle.value}成功`)
                emit('submit')
                close()
            }
        })
    }

    const handleUserChange = (value) => {
        [formM.value.userId, formM.value.userName, formM.value.userEmail] = value.split('/')
        // formM.value.userId= vArr[0]
        // formM.value.userName= vArr[1]
        // formM.value.userEmail = vArr[2]
    }

    defineExpose({
        addAction,
        editAction
    })
</script>

<style scoped>

</style>
